<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
	<view class="app-container page-container" v-if="myRole != ''">
		<!-- 用户信息 -->
		<!-- 用户信息 -->
		<view class="user-profile">
			<!-- 用户信息卡片 -->
			<view class="profile-card">
				<!-- 头像与基本信息 -->
				<view class="profile-header">
					<view class="avatar">
						<image :src="userInfo.avatar" mode="aspectFill" />
					</view>
					<view class="user-details">
						<view class="user-title">
							<text class="text13">{{ userInfo.username || '测试账号' }}</text>
							<view class="btn_role">
								<wd-button size="small" type="error" icon="translate-bold" @click="navigateUrl({
									key: 'settings_role',
								})">
									<text class="text11">切换身份</text>
								</wd-button>
							</view>
						</view>
						<view class="user-location">
							<text class="text12">账号类型:</text>
							<text class="text13">{{ getRole_text() }}</text>
						</view>
					</view>

				</view>

				<view class="profile-stats" v-if="myRole == 'oldman'">
					<view class="stat-item">
						<text class="stat-item__value text12">{{ stats.completed }}</text>
						<text class="stat-item__label text11">已完成服务</text>
					</view>
					<view class="stat-item">
						<text class="stat-item__value text12">{{ stats.satisfaction }}%</text>
						<text class="stat-item__label text11">满意度</text>
					</view>
					<view class="stat-item">
						<text class="stat-item__value text12">{{ stats.points }}</text>
						<text class="stat-item__label text11">积分余额</text>
					</view>
				</view>

				<!-- 数据统计 -->
			</view>

			<!-- 我的订单 -->
			<view class="order-section" v-if="myRole == 'oldman'">
				<view class="order-section__title">
					<text class="text13">我的订单</text>
				</view>
				<view class="order-grid">
					<view class="order-grid-item" @click="navigateOrderListUrl">
						<text class="iconfont icon-daizhifu"></text>
						<text class="order-status-label text12">我的订单</text>
					</view>
					<view class="order-grid-item" @click="navigateOrderListUrl">
						<text class="iconfont icon-yiwancheng"></text>
						<text class="order-status-label text12">积分</text>
					</view>
					<view class="order-grid-item" @click="navigateOrderListUrl">
						<text class="iconfont icon-quxiaodingdan"></text>
						<text class="order-status-label text12">活动</text>
					</view>
				</view>
			</view>

			<!-- 医生 -->
			<view v-if="myRole == 'doctor'" v-for="(item, index) in doctor_cell_list" :key="index"
				class="doctor-info-card">
				<view class="card-left">
					<view :class="['icon-container', item.class1]">
						<text :class="['iconfont', item.class2]"></text>
					</view>
					<view class="text-info">
						<text class="main-text text13">{{ item.title }}</text>
						<text class="sub-text text12">{{ item.desc }}</text>
					</view>
				</view>
			</view>
			<!-- 快捷入口 -->
			<view class="info-section" v-if="myRole != 'doctor'">
				<!-- 标题 -->
				<wd-cell-group title="基本信息" border value="修改信息" clickable>
					<wd-cell title="绑定手机号" :value="userInfo.mobile" />
					<wd-cell title="联系电话" :value="userInfo.phone" />
					<wd-cell title="联系地址">
						<view class="custom-value">
							{{ userInfo.location }}
						</view>
					</wd-cell>
					<wd-cell title="修改基本信息" is-link @click="navigateUrl({
						key: 'setting_updateUserInfo',
						params: { id: 1 }
					})" />
				</wd-cell-group>
			</view>




		</view>
		<!-- 志愿者 -->
		<view class="info-section" v-if="myRole == 'volunteer'">
			<!-- 标题 -->
			<wd-cell-group title="积分管理" border>
				<wd-cell title="积分" :value="userInfo.integrate" />
				<wd-cell title="积分记录" is-link @click="navigateUrl({
					key: 'settings_points_record',
					params: {
						id: 1
					}
				})" />
			</wd-cell-group>
		</view>

		<!-- 服务商 -->
		<view class="info-section" v-if="infoGroups[myRole]?.main">
			<!-- 标题 -->
			<wd-cell-group :key="myRole" :title="infoGroups[myRole]?.main" class="group-container" border>
				<!-- 循环渲染组内单元格 -->
				<wd-cell v-for="(cell, cellIndex) in infoGroups[myRole]?.cell" :key="cellIndex" :title="cell.title"
					:value="cell.content" :is-link="cell.link ? true : false" @click="navigateUrl({
						key: `${cell?.link}`,
						params: {
							id: '1'
						}
					})">
					<!-- 已移除所有图标 -->

					<wd-button v-if="cell.btnColor ? true : false" custom-class="custom-value" size="small"
						plain>立即呼叫</wd-button>
				</wd-cell>

			</wd-cell-group>
		</view>

		<!-- 服务与工具菜单 -->
		<view class="service-menu" v-if="myRole == 'oldman'">
			<!-- 标题 -->
			<view class="service-menu__title">
				<text class="text13">服务和工具</text>
			</view>

			<!-- 网格容器 -->
			<view class="service-menu__grid">
				<view v-for="(item, index) in menuList" @click="navigationHandle(item)" :key="index"
					class="service-menu__item">
					<text :class="['service-menu__icon iconfont', item.icon]"></text>
					<text class="service-menu__text text11">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<view class="info-section">
			<!-- 标题 -->
			<wd-cell-group title="设置" border>
				<wd-cell title="设置字体大小" is-link @click="fontSizeMethod" />
				<wd-cell title="清理缓存" is-link @click="removeCache" />
				<wd-cell title="退出" @click="removeCache" is-link />
			</wd-cell-group>
		</view>
		<!-- 我的订单 -->

	</view>
	<!-- <view v-if="myRole==''" class="top">
		<view class="btns-all">
			<view class="btn_item custom-shadow">
				<wd-button size="large"  class-prefix="iconfont icon-zhifu-weixinzhifu" icon="iconfont icon-zhifu-weixinzhifu" block  style="margin-bottom: 20px;">微信登录</wd-button>
			</view>
			<view class="btn_item">
						<wd-button size="large" icon="edit-outline"  block plain @click="pushLogin">其他方式登录</wd-button>
			</view>		
	
			
		</view>
	</view> -->
	<TabComponent :tabs="currentTabs" @change="changeTab" />

</template>

<script setup>
import {
	ref,
	computed,
	nextTick,
	reactive,
	onMounted
} from 'vue';
import {
	useRouter
} from 'uni-mini-router'

import {
	useFontSizeStore
} from '@/stores/fontSizeStore';
import {
	useTabStore
} from '@/stores/tabs'
import {
	ROLE_TABS
} from "@/config/roles"

import {
	onShow,
	onLoad
} from '@dcloudio/uni-app'

import {
	useShare
} from '@/utils/useShare';
import { getAppEnum } from "@/utils/appDataEnum"


// 配置分享内容
const {
	onShareAppMessage,
	onShareTimeline
} = useShare({
	title: '欢迎',
	path: 'pages/tabPage/doctor/doctor_home', // 当前页面路径
	imageUrl: '/static/share-cover.jpg',
	query: '' // 朋友圈参数（可选）
});



import {
	volunteer_get_user_infoApi
} from "@/api/volunteer"
import TabComponent from '@/components/tab-bar/index.vue'
import {
	doctor_cell_list,
	infoGroups_enum
} from '@/utils/enmuText';
const tabStore = useTabStore()
const myRole = ref("");
const navigateOrderListUrl = () => {
	router.push({
		name: "common_orderList",
		params: {
			id: 1,
			type: ""
		}
	})
}


// 统计数据
const stats = ref({
	completed: 24,
	satisfaction: 98,
	points: 1280
})

const fontSizeStore = useFontSizeStore();

const router = useRouter();
const userRoleName = ref("");
const infoGroups = reactive(infoGroups_enum)

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
	const role = getApp()[getAppEnum.CurrentRole];
	return ROLE_TABS[role]?.tabs //|| ROLE_TABS['default']?.tabs || []
})


// ✅ Tab 点击处理
const changeTab = (tab) => {



	// 	// 第一步：参数校验（避免 tab 或 path 不存在导致跳转失败）
	if (!tab || !tab.path || !tab.key) {
		console.error('Tab 数据异常：', tab)
		return
	}
	nextTick(() => {
		router.pushTab({
			name: tab.key
		})
	})


}

onShow(() => {
	const userRole = getApp()[getAppEnum.CurrentRole];
	myRole.value = userRole;
	if (userRole == "" || userRole == undefined || userRole == null) {
		router.push({
			name: "doctor_home"
		})
	}
})

const pushLogin = () => {
	router.push({
		name: 'account_login'
	})
}
// 菜单数据
const menuList = ref([{
	key: 'service',
	title: '服务管理',
	icon: 'icon-fuwuguanli',
	path: "family_serviceItems"
},
{
	key: 'service',
	title: '我的设备',
	icon: 'icon-shebei3',
	path: 'family_myDevices'
},
{
	key: 'appointment',
	title: '预约记录',
	icon: 'icon-yuyuezhongxin',
	path: "common_appointmentList"
},
{
	key: 'activity',
	title: '活动记录',
	icon: 'icon-icon_jiankangdaka',
	path: "common_activityItems"
},
{
	key: 'health',
	title: '健康档案',
	icon: 'icon-jiankang',
	path: "common_healthItems"
},
{
	key: 'emergency',
	title: '紧急联系人',
	icon: 'icon-jinjilianxiren2',
	path: "common_contacts"
},
{
	key: 'addressList',
	title: '收货地址',
	icon: 'icon-location',
	path: "addressList"
},

{
	key: 'help',
	title: '帮助中心',
	icon: 'icon-bangzhuzhongxin1',
	path: "common_help"
}
])


const navigationHandle = (item) => {
	router.push({
		name: item.path,
		params: {
			id: 0
		}
	})
}


// 用户信息
const userInfo = reactive({
	"role": "",
	"username": "",
	"mobile": "",
	"phone": "",
	"location": "",
	"avatar": "",
	"id": ""
})


const navigateUrl = (item) => {
	if (item.key == "") {
		return false;
	}
	router.push({
		name: item.key,
		params: item.params
	})
}


const getRole_text = () => {

	const role = myRole.value;
	if (role == "volunteer") {
		return "志愿者"
	} else if (role == "commerce") {
		return "服务商"
	} else if (role == "oldman") {
		return "老人"
	} else if (role == "familyMembers") {
		return "家属"
	} else if (role == "doctor") {
		return "医生"
	}
}


onLoad(() => {
	const userRole = getApp()[getAppEnum.CurrentRole];
	myRole.value = userRole;

	if (userRole == "" || userRole == undefined || userRole == null) {
		router.pushTab({
			name: "doctor_home"
		})
	}
})


onMounted(() => {

	const userRole = getApp()[getAppEnum.CurrentRole];
	myRole.value = userRole;

	if (userRole == "" || userRole == undefined || userRole == null) {
		router.pushTab({
			name: "doctor_home"
		})
	}

	const flag = myRole.value == "volunteer"
	if (flag) {
		volunteer_get_user_infoApi({
			id: "1",
			role: tabStore.getUserRole, // "volunteer"
		}).then((res) => {
			if (res.code == 200) {
				Object.assign(userInfo, res.data);
				const val = res.data?.role;
				userInfo.role = ROLE_TABS[val]?.name;
			}
		})
	}




})

const fontSizeMethod = () => {
	router.push({
		name: "font_size"
	})
}




const removeCache = () => {
	// uni.removeStorageSync('userRole')
	uni.showToast({
		title: `清理缓存成功`,
		icon: 'none',
		duration: 400
	})
	uni.setStorageSync('userRole', '')
	uni.removeStorage({
		key: 'userRole',
		success: function (res) {
			console.log('success');
			tabStore.setUserRole("")

			// uni.showToast({
			// 	title: `清理缓存成功`,
			// 	icon: 'none',
			// 	duration: 2000
			// })
			uni.reLaunch({
				url: "/pages/tabPage/doctor/doctor_home"
			})

			// router.pushTab({
			// 	name: "doctor_home"
			// })
		}
	});


}
</script>

<style lang="less" scoped>
@import '@/static/styles/mine/index.less';



.page-container {
	/* padding: 16px; */
	/* background-color: #f8f8f8; #f6f8fa */
	min-height: 100vh;
	padding-bottom: 160px;
}


/* 滚动标签栏 */
.tab-scroll {
	white-space: nowrap;
	width: 100%;
	margin-bottom: 12px;
}

.tab-list {
	display: flex;
	gap: 8px;
}

.tab-item {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	background-color: #f8f8f8;
	border-radius: 20px;
	font-size: 14px;
	color: #666;
	transition: all 0.2s ease;
}

.tab-item.active {
	background-color: #007AFF;
	color: #ffffff;
}

.tab-icon {
	margin-right: 6px;
	font-size: 16px;
}

.tab-text {
	margin-right: 4px;
}

.tab-badge {
	font-size: 10px;
	padding: 2px 6px;
	background-color: #ff4d4f;
	color: #fff;
	border-radius: 10px;
	margin-left: 6px;
	min-width: 16px;
	text-align: center;
}

:deep(.wd-cell__left) {
	// flex: 0 0 180rpx!important;
}

.user-title {
	margin-bottom: 0 !important;
}

.custom-value {
	font-size: 25rpx;
	text-align: left;
}



// 卡片基础样式
.doctor-info-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;


	.iconfont {
		font-size: 36rpx;
	}

	&:last-child {
		border-bottom: none;
	}

	// 左侧内容
	.card-left {
		display: flex;
		align-items: center;
		font: 1;
	}

	// 头像容器
	.avatar-container {
		width: 60px;
		height: 60px;
		border-radius: 8px;
		overflow: hidden;
		margin-right: 16px;

		.avatar {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	// 图标容器
	.icon-container {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16px;
	}

	// 医院图标背景色
	.hospital-icon {
		background-color: rgba(24, 144, 255, 0.1);
	}

	// 科室图标背景色
	.department-icon {
		background-color: rgba(54, 211, 153, 0.1);
	}

	// 反馈图标背景色
	.feedback-icon {
		background-color: rgba(255, 125, 0, 0.1);
	}

	// 文本信息
	.text-info {
		display: flex;
		flex-direction: column;

		.main-text {
			font-size: 16px;
			color: #333;
			font-weight: 500;
			margin-bottom: 4px;
		}

		.sub-text {
			font-size: 14px;
			color: #86909C;
		}
	}

	// 右侧图标
	.card-right {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.top {
	display: flex;
	/* 父容器使用flex布局 */
	align-items: center;
	/* 垂直居中对齐 */

	width: 100%;
	/* 占满父容器宽度 */
	padding: 20rpx;
	/* 可选：添加内边距 */
	box-sizing: border-box;
	/* 确保padding不影响整体宽度 */
	height: 100vh;

	.left {
		flex: 1;
		/* 占剩余全部宽度 */
		/* 允许内容多行显示 */
		white-space: normal;
		/* 取消单行限制 */
		word-break: normal;
		/* 正常换行 */
		line-height: 1.5;
		/* 优化多行文本行高 */

		.title1 {
			/* 文本样式可根据需要调整 */
			display: block;
			/* 让每个text标签独占一行（如果需要换行的话） */
			font-size: 32rpx;
			color: #333;
			/* 如需单行超出省略，可添加：
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      */
		}

		/* 如需两个text之间添加间距 */
		.title1+.title1 {
			margin-top: 8rpx;
		}
	}

	.right {
		flex: 0 0 200rpx;
		/* 固定宽度200rpx，不伸缩 */
		display: flex;
		justify-content: center;
		/* 图片水平居中 */
		align-items: center;
		/* 图片垂直居中 */
		height: 100%;
		/* 高度与父容器一致 */

		image {
			//   width: 100%; /* 图片占满right容器宽度 */
			//   height: auto; /* 保持图片比例 */
			height: 120rpx;
			/* 可选：限制图片最大高度 */
			//   object-fit: contain; /* 图片自适应容器，不拉伸 */
		}
	}
}

.btns-all {
	height: 130px;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.btn_item {
	height: 100px;
	width: 100%;

}

.custom-shadow {
	:deep(.wd-button.is-primary) {
		background-color: #07c160;
	}
}

:deep(.custom-value) {
	font-size: 1.2rem !important;
}

.btn_role {
	border: 2rpx solid #fff;
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>